@import 'default';
@import './component/banner';
@import './component/grid';
@import './component/tab';
@import './component/form';
.banner{
	width:100%;
	height: 300px;
	background: url(../img/banner/banner1.png) no-repeat;
	background-size:100% 300px;
	-webkit-background-size:100% 300px;
	background-position: center center;
}
.content{   
	width:100%;
	height:100%;
}

.container{
	margin: 0 auto;
	&.index-main{
		margin:0px auto;
		height: auto;
		overflow: hidden;
	}
}
.line{
	width: 5px;
	height: 22px;
	background: #f46a00;
	float: left;
}
.title{
	float: left;
	line-height: 22px;
	font-size:22px;
	color:#2b363e;
	padding:0 9px;
}
.money{
	background: url(../img/static/money.png) no-repeat;
	width:10px;
	height: 10px;
	display: inline-block;
	position: relative;
	left:2px;
}
.index-main-left{
	width:895px;
	height:auto;
	float: left;
	margin-right:20px;
	.index-main-left-top{
		height: 46px;
		overflow: hidden;
		border:1px solid #e8e8e8;
	}
	.index-main-left-bottom{
		margin-top:20px;
		padding-left:15px;
		padding-right:15px;
		width:865px;
	}
}
.index-main-right{
	width:283px;
	height: auto;
	float: left;
	.index-main-right-top{
		height: auto;
		width:283px;
		border:1px solid #e8e8e8;
		position: relative;
	}
	.index-main-right-middle{
		height: auto;
		width:283px;
		margin:15px 0;
		border:1px solid #e8e8e8;
	}
}
.title-area{
	padding-top:18px;
	overflow: hidden;
}
.left-group{
	float: left;
	.single-button{
		padding:0 25px;
		line-height: 46px;
		border-right:1px solid #e8e8e8;
		display: inline-block;
		font-size:20px;
		font-weight: bold;
		color:#656565;
		cursor: pointer;
		&.active{
			background: #f46a00;
			color:#fff;
		}
	}
}
.game-play-record{
	float: right;
	margin-right:15px;
	line-height: 46px;
	span{
		font-size:13px;
		color:#576077;
		cursor:pointer;
		&.current{
			color:#fd6564;
		}
	}
}
.game-select-list{
	float:left;
	font-size:0;
	.game-select-cell{
		display: inline-block;
		cursor: pointer;
		font-size:15px;
		color:#2b363e;
		line-height: 24px;
		margin-left:20px;
	}
	.arrow{
		width:5px;
		height:11px;
		display: inline-block;
		padding: 0px 5px;
		&.top{
			background: url(../img/static/arrow.png) no-repeat;
			background-position: 0 -5px;
		}
		&.bottom{
			background: url(../img/static/arrow.png) no-repeat;
			background-position: 0 -23px;
		}
	}
}
.activity-list{
	overflow: hidden;
	.game-left{
		float: left;
		width:210px;
		height: 390px;
		position: relative;
		margin-right:15px;
		margin-top:28px;
		.itemImgArea{
			height: 366px;
		}
		.joinBtn{
			margin:160px auto 0;
		}
	}
	ul{
		float: left;
		width:865px;
		&.game-right{
			width:640px;
		}
	}
	.activity-item{
		position: relative;
		overflow: hidden;
		margin-top:28px;
		float: left;
		width:203px;
		height: 183px;
		margin-right:15px;
		&.spec{
			width:210px;
		}
		&.mar-right{
			margin-right:0;
		}
	}
	.itemImgArea{
		height: 155px;
		position: relative;
		overflow: hidden;
	}
	.activity-icon{
		width:27px;
		height: 33px;
		background: url(../img/icon/activity.png) no-repeat;
		position: absolute;
		left:2px;
		top:-2px;
		z-index:10;
	}
	.itemImg{
		width: 100%;
		height: 100%;
	}
	.itemDesc{
		font-size:12px;
		color:#fff;
		background: #606268;
		line-height: 24px;
		width:100%;
		position: absolute;
		bottom:0;
	}
	.itemDesc-left{
		float: left;
		margin-left:3px;
	}
	.itemDesc-right{
		color:#f4f800;
		float: right;
		margin-right:3px;
	}
	.reward-desc{
		font-size:13px;
		line-height: 1em;
		color:#576077;
		margin-top:11px;
		.number{
			color:#ff1800;
		}
		.game-flag{
			border:1px solid #ac00cc;
			font-size:13px;
			display: block;
			float: right;
			margin-top: -4px;
			padding:2px;
			color:#ac00cc;
		}
	}
	.cover{
		width:100%;
		height: 100%;
		position: absolute;
		bottom:-100%;
		left:0;
		background: rgba(0,0,0,0.5);
		text-align: center;
	}
	.itemImgArea:hover .cover{
		bottom:0px;
		transition:0.5s;
		-webkit-transition:0.5s;
		-o-transition:0.5s;
		-moz-transition:0.5s;
	}
	.joinBtn{
		height: 35px;
		width:125px;
		display: block;
		margin:50px auto 0;
		text-align: center;
		line-height: 35px;
		background: #e02423;
		border-radius: 4px;
		font-size: 16px;
		color: #fff;
	}
	.joinCnt{
		text-align: center;
		line-height: 28px;
		font-size: 14px;
		color: #fff;
	}
}
.top-title{
	color:#576077;
	background: #f4f5f9;
	height: 40px;
	line-height: 40px;
	padding-left:16px;
	border-bottom:1px solid #e8e8e8;
}
.tab-select{
	position: absolute;
	right:16px;
	line-height: 40px;
	top:0;
	color:#576077;
	.month,.prev-month{
		cursor: pointer;
		&.current{
			color:#ff0000;
		}
	}
}
.tab-list{
	width:100%;
	height: 36px;
	line-height: 36px;
	border-bottom:1px solid #e8e8e8;
	overflow: hidden;
	.tab-name{
		width:72px;
		float: left;
		color:#576077;
		font-size:12px;
		text-align: center;
		&.first{
			text-align: left;
			padding-left:16px;
			width:50px;
		}
	}
}
.table{
	overflow: hidden;
	.table-cell{
		padding:5px 0;
		height: 26px;
		line-height: 26px;
		text-align: center;
		&.even{
			background: #f4f5f9;
		}
	}
	.cell-element{
		width:72px;
		float: left;
		font-size:12px;
	}
	.rank{
		width:25px;
		height: 26px;
		margin:0 25px 0 16px;
		&.first{
			background: url(../img/static/first.png) no-repeat;
		}
		&.second{
			background: url(../img/static/second.png) no-repeat;
		}
		&.third{
			background: url(../img/static/third.png) no-repeat;
		}
	}
	.name{
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.income{
		color:#576077;
		font-size:13px;
	}
	.rewards{
		color:#ff1800;
	}
}
.rank-desc{
	line-height: 40px;
	color:#576077;
	font-size:16px;
	margin:0 15px;
	border-top:1px solid #e8e8e8;
}
.rankTxt{
	padding-left:20px;
}
.pageInfo{
	line-height: 40px;
	text-align: center;
	.page-content{
		display: inline-block;
		overflow: hidden;
	}
	.prev,.next,.page{
		font-size:12px;
		float: left;
		color:#576077;
	}
	.page{
		padding:0 5px;
	}
}
.withDraw{
	height: 390px;
	overflow: hidden;
	.withdraw-cell{
		height: 55px;
		padding:12px 16px 11px;
		&.even{
			background: #f4f5f9;
		}
	}
	.cell-left{
		width:55px;
		height: 55px;
		margin-right:17px;
		float: left;
		&.man{
			background: url(../img/static/man.png) no-repeat;
		}
		&.girl{
			background: url(../img/static/girl.png) no-repeat;
		}
	}
	.cell-right{
		width:160px;
		float: left;
		color:#576077;
		font-size:12px;
		line-height: 20px;
	}
	.withdraw-money{
		.moneyNum{
			color:#ff1e00;
		}
	}
}